<!-- 创建模板页面的卡片头部 -->
<template>
  <div class="template-create-header">
    <t-breadcrumb maxItemWidth="400">
      <t-breadcrumbItem @click="$router.replace('/risk-assessment/template')">评估模板</t-breadcrumbItem>
      <t-breadcrumbItem @click="$emit('update:currentPageStatus', PAGE_STATUS.WELCOME)">
        {{ breadCrumbTitle }}
      </t-breadcrumbItem>
      <t-breadcrumbItem v-if="currentPageStatus === PAGE_STATUS.QUESTION">当前页面</t-breadcrumbItem>
    </t-breadcrumb>
    <t-space>
      <t-button v-if="currentPageStatus === PAGE_STATUS.QUESTION" theme="warning" @click="backHandle">
        <template #icon>
          <chevron-left-icon size="20px" />
        </template>
        修改模板信息
      </t-button>
      <t-button v-if="currentPageStatus === PAGE_STATUS.QUESTION" theme="success" @click="releaseHandle">
        <template #icon>
          <check-rectangle-icon size="20px" />
        </template>
        发布
      </t-button>
      <t-button @click="saveHandle">
        <template #icon>
          <save-icon size="20px" />
        </template>
        {{ currentPageStatus === PAGE_STATUS.WELCOME ? '下一步' : '保存' }}
      </t-button>
      <t-button theme="default" @click="$router.replace('/risk-assessment/template')">取消</t-button>
    </t-space>
  </div>
</template>

<script>
import { SaveIcon, CheckRectangleIcon, ChevronLeftIcon } from 'tdesign-icons-vue';
import { PAGE_STATUS } from '@/constants/risk-assessment-template';

export default {
  name: 'RAT-CreateHeader',
  components: { SaveIcon, CheckRectangleIcon, ChevronLeftIcon },
  props: {
    currentPageStatus: {
      type: Number,
      default: 1,
    },
    breadCrumbTitle: {
      type: String,
      default: '新建模板',
    },
  },
  data() {
    return {
      PAGE_STATUS,
    };
  },
  methods: {
    saveHandle() {
      this.$emit('saveHandle');
    },
    releaseHandle() {
      this.$emit('releaseHandle');
    },
    backHandle() {
      this.$emit('backHandle');
    },
  },
};
</script>

<style lang="less" scoped>
.template-create-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
</style>
